<template>
	<div>
	<!-- 	<view class='search' :style="{ top: homeTop + 'px' }">
		
			<view class="iconfont icon-xiangzuo" @click="goback()"></view>
			<view class="toptext">
				商家列表
			</view>
		
		</view> -->
		<div class="storeBox" ref="container">
			
			<div class="storeBox-box" v-for="(item, index) in storeList" :key="index" @click.stop="checked(item)">
				<div class="store-img"><img :src="item.image" lazy-load="true" /></div>
				<div class="store-cent-left">
					<div class="store-name"><span>{{ item.name }}</span>     <span class="distance">242.32km</span></div>
					<view class="BusinessHours">
						<view class="text1">
							营业中
						</view>
						<view class="text2">
							{{item.dayTime.split(',')[0]}} - {{item.dayTime.split(',')[1]}}
						</view>
						
					</view>
					<div class="store-address ">
						{{ item.address }}{{ ", " + item.detailedAddress }}
					</div>
					
					<view class="phone">
						<view class="leftbox">
							<span class="iconfont icon-dianhua_o"></span>
							{{item.phone}}
						</view>
						
						<view class="rightbox">
							店铺详情
						</view>
						
					</view>
				</div>
				<div v-if='false' class="row-right">
					<div>
						<!-- #ifdef H5 -->
						<a class="store-phone" :href="'tel:' + item.phone"><span
								class="iconfont icon-dadianhua01"></span></a>
						<!-- #endif -->
						<!-- #ifdef MP || APP-PLUS -->
						<view class="store-phone" @click="call(item.phone)"><text
								class="iconfont icon-dadianhua01"></text></view>
						<!-- #endif -->
					</div>
					<div>
						<a class="store-phone" :href="'tel:' + item.phone"><span class="iconfont icon-dadianhua01"></span></a>
					</div>
					<div class="store-distance" @click.stop="showMaoLocation(item)">
						<span class="addressTxt" v-if="item.distance">距离{{ item.distance/1000 }}千米</span>
						<span class="addressTxt" v-else>查看地图</span>
						<span class="iconfont icon-youjian"></span>
					</div>
				</div>
			</div>


			<!-- <Loading :loaded="loaded" :loading="loading"></Loading> -->
		</div>
		<div>
			<!-- <iframe v-if="locationShow && !isWeixin" ref="geoPage" width="0" height="0" frameborder="0" style="display:none;"
			 scrolling="no" :src="
          'https://apis.map.qq.com/tools/geolocation?key=' +
            mapKey +
            '&referer=myapp'
        ">
			</iframe> -->
		</div>
	</div>
</template>

	<!-- import Loading from "@/components/Loading"; -->
<script>
	// import {
	// 	storeListApi
	// } from "@/api/store";
	import {
		isWeixin
	} from "@/utils/index";
	// #ifdef H5
	import {
		wechatEvevt,
		wxShowLocation
	} from "@/libs/wechat";
	// #endif

	import {
		mapGetters
	} from "vuex";
	// import cookie from "@/utils/store/cookie";
	const LONGITUDE = "user_longitude";
	const LATITUDE = "user_latitude";
	const MAPKEY = "mapKey";
	export default {
		name: "storeList",
		// components: {
		// 	Loading
		// },
		// computed: mapGetters(["goName"]),
		data() {
			return {
				page: 1,
				limit: 20,
				loaded: false,
				// loading: false,
				storeList: [],
				system_store: {},
				// mapKey: cookie.get(MAPKEY),
				locationShow: false,
				user_latitude: 0,
				user_longitude: 0,
				homeTop:'',
			};
		},
		onLoad() {
			
			const systemInfo = uni.getSystemInfoSync()
			  console.log(systemInfo.safeArea)
			  
	
			  this.homeTop = systemInfo.safeArea.top
			  console.log(this.homeTop,'安全高度')
			
			try {
				this.user_latitude = uni.getStorageSync('user_latitude');
				this.user_longitude = uni.getStorageSync('user_longitude');
			} catch (e) {
				// error
			}
		},
		mounted() {
			if (this.user_latitude && this.user_longitude) {
				this.getList();
			} else {
				this.selfLocation();
				this.getList();
			}
			// this.$scroll(this.$refs.container, () => {
			//   !this.loading && this.getList();
			// });
		},
		methods: {
			goback() {
			
				 uni.navigateBack()
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			selfLocation() {
				let self = this
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.location().then(res => {
						this.user_latitude = res.latitude;
						this.user_longitude = res.longitude;
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
						self.getList();
					})
				} else {
				// #endif	
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							try {
								this.user_latitude = res.latitude;
								this.user_longitude = res.longitude;
								uni.setStorageSync('user_latitude', res.latitude);
								uni.setStorageSync('user_longitude', res.longitude);
							} catch {}
							self.getList();
						},
						complete: function() {
							self.getList();
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			showMaoLocation(e) {
				let self = this;
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.seeLocation({
						latitude: Number(e.latitude),
						longitude: Number(e.longitude)
					}).then(res => {
						console.log('success');
					})
				} else {
					// #endif	
					uni.openLocation({
						latitude: Number(e.latitude),
						longitude: Number(e.longitude),
						name: e.name,
						address: `${e.address}-${e.detailedAddress}`,
						success: function() {
							console.log('success');
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			// 选中门店
			checked(e) {

				uni.$emit("handClick", {
					address: e
				});
				
			
				uni.navigateTo({
					url:`/pages/store/offlineStoreDetail?id=${e.id}&latitude=${e.latitude}&longitude=${e.longitude}`
				})
				// uni.navigateBack();
				// if (this.goName === "orders") {
				//   this.$store.commit("GET_STORE", e);
				//   this.$router.go(-1); //返回上一层
				// }
			},
			// 获取门店列表数据
			getList: function() {
				// if (this.loading || this.loaded) return;
				// this.loading = true;
				let data = {
					latitude: this.user_latitude || "", //纬度
					longitude: this.user_longitude || "", //经度
					page: this.page,
					limit: this.limit
				};
				// storeListApi(data)
				// 	.then(res => {
				// 		// this.loading = false;
				// 		this.loaded = res.data.list.length < this.limit;
				// 		this.storeList.push.apply(this.storeList, res.data.list);
				// 		this.page = this.page + 1;
				// 	})
				// 	.catch(err => {
				// 		this.$dialog.error(err);
				// 	});
			let 	letstoreList= [
  {
    id: 1,
    name: "朝阳旗舰店",
    image: "https://example.com/store1.jpg",
    dayTime: "09:00,21:00",
    address: "北京市朝阳区三里屯SOHO",
    detailedAddress: "A座 3 层 302",
    phone: "010-88886666",
    distance: 242320, // 单位：米（你页面里写的是 item.distance/1000）
    longitude: 116.450,
    latitude: 39.930
  },
  {
    id: 2,
    name: "望京生活馆",
    image: "https://example.com/store2.jpg",
    dayTime: "10:00,22:00",
    address: "北京市朝阳区望京街道",
    detailedAddress: "花家地南里 8 号楼 1 层",
    phone: "010-66668888",
    distance: 153000,
    longitude: 116.480,
    latitude: 40.000
  },
  {
    id: 3,
    name: "海淀中心店",
    image: "https://example.com/store3.jpg",
    dayTime: "08:30,20:30",
    address: "北京市海淀区中关村大街",
    detailedAddress: "银科大厦 B 座",
    phone: "010-99997777",
    distance: 68000,
    longitude: 116.320,
    latitude: 39.980
  },
  {
    id: 4,
    name: "亦庄体验店",
    image: "https://example.com/store4.jpg",
    dayTime: "09:30,20:00",
    address: "北京市经济技术开发区",
    detailedAddress: "荣京丽都 B 区 105",
    phone: "010-77775555",
    distance: 85000,
    longitude: 116.510,
    latitude: 39.790
  }
]
		this.storeList.push.apply(this.storeList, letstoreList);
				
			}
		},
		onReachBottom() {
			this.getList();
		}
	};
</script>

<style>
	.search{
		    width: 100%;
		    height: 86rpx;
		   padding-left: 11px;
		    box-sizing: border-box;
			background-color: #e83323 ;
			/* line-height: 86rpx; */
		   
		   display: flex;
		   align-items: center;
		   position: fixed;
		   top: 0;
		   left: 0;
		 
	}
	
	.geoPage {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 10000;
	}

	.storeBox {
		width: 100%;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.storeBox-box {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		padding: 23rpx 0;
		/* justify-content: space-between; */
		border-bottom: 1px solid #eee;
	}

	.store-cent {
		display: flex;
		align-items: center;
		width: 80%;
	}

	.store-cent-left {
		width: 70%;
	}

	.store-img {
		width: 170rpx;
		height: 170rpx;
		border-radius: 40rpx;
		margin-right: 22rpx;
	}

	.store-img img {
		width: 100%;
		height: 100%;
	}

	.store-name {
		color: #282828;
		font-size: 30rpx;
		/* margin-bottom: 22rpx; */
		font-weight: 800;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.store-address {
		color: #666666;
		font-size: 24rpx;
	}

	.store-phone {
		width: 50rpx;
		height: 50rpx;
		color: #fff;
		border-radius: 50%;
		display: block;
		text-align: center;
		line-height: 48rpx;
		background-color: #e83323;
		margin-bottom: 22rpx;
		text-decoration: none;
	}

	.store-distance {
		font-size: 22rpx;
		color: #e83323;
	}

	.iconfont {
		font-size: 20rpx;
	}

	.row-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		width: 33.5%;
	}
	 .icon-xiangzuo {
		font-size: 35rpx;
		color: #fff;
	}
	.toptext{
	font-size: 36rpx;
		color: #fff;
		
		margin-left: 250rpx;
	}
	.BusinessHours{
		display: flex;
		align-items: center;
		font-size: 24rpx;
		margin-bottom: 15rpx;
		
	}
	.text1{
		color: green;
	}
	.text2{
		margin-left: 20rpx;
	}
	.icon-dianhua_o{
		font-size: 36rpx;
		color: #000;
		
	}
	.phone{
		display: flex;
		margin-top: 15rpx;
		justify-content: space-between
	}
	.leftbox{
		color: blue;
		font-size: 24rpx;
		
	}
	.rightbox{
		background-color: #eee;
		border-radius: 25rpx;
		padding: 5rpx 15rpx;
		font-size: 26rpx;
		
	}
	.distance{
	
	font-size: 24rpx;
	
	font-weight:400
	}
</style>
